import React, {
  ReactElement,
  useContext,
  useEffect,
  useMemo,
  useRef
} from 'react';
import { Image, Text, View } from 'react-native';
import LinearGradient from 'react-native-linear-gradient';

import Button from '../../../../../../components/Button';
import {
  classRoomBack,
  transparentBack
} from '../../../../../../constant/resource';
import { back, titleChangeBarStatus } from '../../../../actions';
import { PPTType } from '../../../../constant';
import { Store } from '../../../../reducer';

import styles from './style';

export default (): ReactElement => {
  const view = useRef<View>(null);

  const { state } = useContext(Store);
  const { lesson, currentPPT, showBar } = state;
  const { lessonName } = lesson;

  useEffect((): void => {
    if (view && view.current) {
      view.current.setNativeProps({
        style: { top: showBar ? 0 : -300 }
      });
    }
  }, [showBar]);

  return useMemo((): ReactElement => {
    if (currentPPT.type === PPTType.Unknown) {
      return <View />;
    }

    if (currentPPT.type === PPTType.Problem) {
      return (
        <Button style={styles.problemBack} onPress={back}>
          <Image source={transparentBack} style={styles.backIcon} />
        </Button>
      );
    }

    return (
      <View style={[styles.container]} ref={view}>
        <LinearGradient
          start={{ x: 0.0, y: 0.0 }}
          end={{ x: 0.0, y: 1.0 }}
          colors={[
            'rgba(0, 0, 0, .45)',
            'rgba(0, 0, 0, .25)',
            'rgba(0, 0, 0, 0)'
          ]}
          style={styles.content}
        >
          <Button style={styles.back} onPress={back}>
            <Image source={classRoomBack} style={styles.backIcon} />
          </Button>
          <Button style={styles.empty} onPress={titleChangeBarStatus} />
          <Text style={styles.name}>{lessonName}</Text>
        </LinearGradient>
      </View>
    );
  }, [currentPPT.type, lessonName]);
};
